We're using cookies, but you can turn them off in your browser settings. Otherwise, you are agreeing to our use of cookies. Learn more in our Privacy Policy.

Buttons

Primary Button

Link as Button

Save and Continue

Secondary Button

Large Button

Destructive Button

Transparent Button

Anchor Button

Disabled Button

Button as a Link

Icon Button

Add to Calendar

Watch live stream

Watch live stream

Wide CTA

Browse Archive

HTML

<button>Save and Continue</button>
<a href="http://cfainstitute.org" class="button">Save and Continue</a>
<button class="secondary">Save and Continue</button>
<button class="large">Save and Continue</button>
<button class="destructive">Discard Changes</button>
<button class="anchor">Learn more</button>
<input type="submit" class="button" disabled="disabled" value="Submit" />
<button class="link">Learn more</button>
<button class="icon"></button>
<button class="secondary"><span class="pe-7s-date"></span>Add to Calendar</button>
<a href="#" class="button play-media"><i class="cfaicon-play_button"></i>Watch live stream</a>
<a href="#" class="button wide-cta">Browse Archive</a>

Problem Being Solved

Users need to interact with content on a page, or navigate to a different page.

When to Use

Roughly, buttons that look like buttons should be used when the user needs to do something (ex., submit a form). Buttons that look like links, or the icon button, should be used when the user needs to go somewhere.

When Not to Use

Buttons should not be used to contain content. They should not be used when most users would expect a different kind of control.

Formatting

For accessibility, all buttons and links should have visible focus.